<template>
      <div class="page member-info">
        <div class="mod-user com-border-top com-border-bottom" v-if="item.member_status == -1">
            <a href="javascript:;">
                <div class="avatar-box">
                    <img class="avatar" v-if="item.logo.thumb_url" :src="item.logo.thumb_url" alt="" @click="showBigAvatar(item.logo.url)">
                    <img class="avatar" v-else src="../../static/imgs/avatar.png" alt="">
                    <span class="cover" v-if="item.member_status == -1">已离职</span>
                </div>
                <div class="info">
                    <p class="name">{{item.name}}<span v-show="item.gender" class="icon-gender bg_sprite" :class="{female:item.gender == '女',male:item.gender == '男' || item.gender == ''}"></span></p>
                    <p v-show="item.name!= item.real_name" class="team">真实姓名：{{item.real_name}}</p>
                </div>
                <!-- <div class="info" style="flex:1;display: flex;align-items: center;justify-content: end;" v-if="!item.entry_date"> -->
                    <div class="info" style="flex:1;display: flex;align-items: center;justify-content: end;">
                    <button class="btn" @click.stop="showEntryDate">{{item.entry_date ? '已入职' : item.entry_status}}</button>
                </div>
            </a>
        </div>
        <div class="mod-user com-border-top com-border-bottom" v-else>
            <a href="#">
                <img class="avatar" v-if="item.logo.thumb_url" :src="item.logo.thumb_url" alt="" @click="showBigAvatar(item.logo.url)">
                <img class="avatar" v-else src="../../static/imgs/avatar.png" alt="">
                <div class="info">
                    <p class="name">{{item.name}}<span v-show="item.gender" class="icon-gender bg_sprite" :class="{female:item.gender == '女',male:item.gender == '男' || item.gender == ''}"></span></p>
                    <p v-show="item.name!= item.real_name" class="team">真实姓名：{{item.real_name}}</p>
                </div>
                <div class="info" style="flex:1;display: flex;align-items: center;justify-content: end;">
                    <!-- <div class="info" style="flex:1;display: flex;align-items: center;justify-content: end;"> -->
                    <button class="btn" @click.stop="showEntryDate">{{item.entry_date ? '已入职' : item.entry_status}}</button>
                </div>
            </a>
        </div>
        <div class="weui-cells"> 
            <div class="weui-cell" @click='callPhone(item.mobile)'>
                <div class="weui-cell__bd">
                    <p><span class="title">电话</span><span class="phone">{{numberHide}}</span></p>
                </div>
                <span class="bg_sprite icon_phone"></span>
            </div>
            <div v-show="item.province || item.city || item.district" class="weui-cell">
                <div class="weui-cell__bd">
                    <p><span class="title">地区</span>{{item.city}} {{item.district}}</p>
                </div>
            </div>
            <a @click="toMoreInfo" class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">
                    <p><span class="title">更多</span></p>
                </div>
                <div class="weui-cell__ft">
                </div>
            </a>
        </div> 
        <div  class="weui-cells">
            <a @click="selectGroup" class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">
                    <p><span :value="groupId" class="title">所在部门</span>{{groupName}}</p>
                </div>
                <div class="weui-cell__ft" v-if="item.action.group && (!isXmmerber)">
                </div>
            </a>
            <a @click="selectRole" class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">
                    <p><span :value="identity" class="title">角色</span>{{identity_str}}</p>
                </div>
                <div class="weui-cell__ft" v-if="item.action.identity && (!isXmmerber)">
                </div>
            </a>
            <!-- <a @click="selectPost" class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">
                    <p>
                      <span :value="identity" class="title">岗位</span>
                      <span class="placeholder" v-if="this.memberPost == ''">请选择岗位</span>
                      <span v-else>{{memberPost}}</span>                      
                    </p>
                </div>
                <div class="weui-cell__ft">
                </div>
            </a> -->
            <a @click="selectRemark" class="weui-cell weui-cell_access remark">
                <div class="weui-cell__bd">
                    <p style="display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; white-space: normal;">
                        <span class="title">备注</span>                                            
                        <span class="placeholder" v-if="this.item.remark == '添加更多备注信息'">{{item.remark}}</span>
                        <span v-else>{{short_remark}}</span> 
                    </p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>
            <a @click="selectGroupType" class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">
                    <p><span class="title">部门调动信息</span></p>
                </div>
                <div class="weui-cell__ft" v-if="item.change_list && item.change_list.length && (!isXmmerber)">
                </div>
            </a>
            <!-- <div class="card" v-if="item.change_list && item.change_list.length">
                <table class="three-column-table">  
                    <thead>  
                        <tr>  
                            <th>调动前部门</th>  
                            <th>调动后部门</th>  
                            <th>调动日期</th>  
                        </tr>  
                    </thead>  
                    <tbody>  
                        <tr v-for="(index,v) in item.change_list" :key="index">  
                            <td>{{v.current_group_name}}</td>  
                            <td>{{v.target_group_name}}</td>  
                            <td>{{v.create_at}}</td>   
                        </tr>    
                    </tbody>  
                </table> 
            </div> -->
        </div>
        <!-- <a @click='delMember' class="weui-btn weui-btn_warn" v-if="item.action.delete">删除成员</a> --> 
        <template v-if="showEvaluation">   
          <div class="weui-cells weui-cells_form" style="margin-bottom: 12px;" v-if="evaluation_data.star_level == 0">
                <div class="evaluation">
                    <div class="evaluation_img" :class="{'evaluation_style1': evaluation_data.star_level == 1,'evaluation_style2': evaluation_data.star_level == 2,'evaluation_style3': evaluation_data.star_level == 3,'evaluation_style4': evaluation_data.star_level == 4,'evaluation_style5': evaluation_data.star_level == 5}"><span class="star1" @click="gotoEvaluation(1)"></span><span class="star2" @click="gotoEvaluation(2)"></span><span class="star3" @click="gotoEvaluation(3)"></span><span class="star4" @click="gotoEvaluation(4)"></span><span class="star5" @click="gotoEvaluation(5)"></span></div>
                    <div class="evaluation_text">
                        <p v-if="evaluation_data.prompt">{{evaluation_data.prompt}}</p>
                        <p v-else>填写评价，吐槽或者鼓励一下~</p>
                    </div>
                </div>
            </div>
            <div class="weui-cells weui-cells_form" style="margin-bottom: 12px;" v-else @click="gotoEvaluation(evaluation_data.star_level)">
                <div class="evaluation">
                    <div class="evaluation_img" :class="{'evaluation_style1': evaluation_data.star_level == 1,'evaluation_style2': evaluation_data.star_level == 2,'evaluation_style3': evaluation_data.star_level == 3,'evaluation_style4': evaluation_data.star_level == 4,'evaluation_style5': evaluation_data.star_level == 5}"><span class="star1"></span><span class="star2"></span><span class="star3"></span><span class="star4"></span><span class="star5"></span></div>
                    <div class="evaluation_text">
                        <p v-if="evaluation_data.prompt">{{evaluation_data.prompt}}</p>
                        <p v-else>填写评价，吐槽或者鼓励一下~</p>
                    </div>
                </div>
            </div>
        </template> 
        <div class="modal" v-if="showCalendarValue">
            <div class="calendar-pannel">
                <div class="popup-title">
                    <div class="popup-title-text">入职日期选择</div>
                    <div class="close-popup"  @click.stop="showCalendar">关闭</div>
                </div>
                <inline-calendar 
                    :selector-array.sync="list" 
                    :weeks-list="weeksData"
                    :custom-slot-fn="customFn"
                    :value.sync="curDateValue"
                    :set-month="setMonth"
                    :set-year="setYear"
                    :month.sync="ourMonth"
                    :year.sync="ourYear" 
                    :start-date="startDate"
                    :end-date="endDate"
                    >
                </inline-calendar>
                <div class="btn-box bg-color fixed" @click="submit"><a href="javascript:;" class="weui-btn weui-btn_primary">确定</a></div>
            </div>
        </div> 
        <formpopup :visible="visible" :title="popupTitle" :isHideBtn="entryPersonData.entryStatus === '已入职'" @close="onClose" @submit="onSubmit">
            <div class="graid-item">
                <div class="graid-item-label">姓名</div>
                <div class="graid-item-text">{{entryPersonData.nick_name}}</div>
            </div>
            <div class="graid-item">
                <div class="graid-item-label">出生年月</div>
                <div class="graid-item-text">{{entryPersonData.birthday}}</div>
            </div>
            <div class="graid-item">
                <div class="graid-item-label">身份证正面</div>
                <div class="graid-item-text">
                    <img class="img" :src="entryPersonData.card_front" alt="" @click="previewPic(entryPersonData.card_front)">
                </div>
            </div>
            <div class="graid-item">
                <div class="graid-item-label">身份证反面</div>
                <div class="graid-item-text" >
                    <img class="img" :src="entryPersonData.card_back" alt="" @click="previewPic(entryPersonData.card_back)">
                </div>
            </div>
            <div class="graid-item">
                <div class="graid-item-label">是否有健康证</div>
                <div class="graid-item-text">{{entryPersonData.is_health_cert == '1' ? '有' : '无'}}</div>
            </div>
            <div class="graid-item">
                <div class="graid-item-label">入职日期</div>
                <div class="graid-item-text" v-if="entryPersonData.entryStatus === '已入职'">{{entryPersonData.entryDate}}</div>
                <div class="graid-item-text" v-else @click="showCalendar">{{entryPersonData.entryDate}}</div>
            </div>
        </formpopup>
        <formpopup :visible="department" title="更换部门" :isHideBtn="false" height="45%" @close="onCloseDepartment" @submit="onSubmitDepartment">
            <div class="graid-item">
                <div class="graid-item-label">当前部门</div>
                <div class="graid-item-text">{{groupName}}</div>
            </div>
            <div class="graid-item" @click="handleDepartmentText()">
                <div class="graid-item-label">更换门店</div>
                <div class="graid-item-text">{{departmentText}}</div>
                <div class="graid-item-arrow-right"></div>
            </div>
            <div class="graid-item" v-if="departmentChildrenListCache.length" @click="handleDepartment1Text()">
                <div class="graid-item-label">更换到课</div>
                <div class="graid-item-text">{{department1Text}}</div>
                <div class="graid-item-arrow-right"></div>
            </div>
            <div>
            
            </div>
        </formpopup>      
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import $ from 'zepto'
    import cache from 'gapi/cache'
    import clientInfo from 'gapi/clientInfo'
    import * as util from 'js/util.js'
    import clientUi from 'gapi/clientUi'
    import widget from 'gapi/widget'
    import commonPage from 'clientApi/commonPage.js'
    import userCenterApi from 'clientApi/userCenterApi.js'
    import teamApi from 'clientApi/teamApi.js'
    // import InlineCalendar from 'components/inline-calendar'
    import { InlineCalendar, Selector, Group, Picker, PopupPicker } from 'vux'
    import Formpopup from 'components/Formpopup/Formpopup'

    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {
            InlineCalendar,
            Formpopup,
            Picker,
            Selector,
            Group,
            PopupPicker
        },
        data: function(){
            return{
                adminChangeMemberRole: false,
                editGroup: false,
                showDelMemberBtn: false,
                userId: '',
                duid: '',
                item: {
                  logo: {
                  url: "",
                  thumb_url: ""
                  },
                  action: {
                    group: true,
                    identity: true,
                    delete: false,
                    post: true,
                  },
                },
                identity: '',
                identity_str: '',
                memberPost: '',//岗位
                memberPost_id: '',//岗位
                groupId: '',
                groupName: '',
                short_remark: '',
                isOur: false , // 当前成员是否是自己
                numberHide: '',//隐藏后四位的电话号码
                evaluation_data: {},
                evaluation_tag: [], 
                showEvaluation: false,//是否展示评价入口
                // showSubmitevaluation: false,//是否允许提交评价
                transition: {
                    star_level: '',
                    tag: [],
                    evaluate: ''
                },//评价过渡数据
                isXmmerber: false,
                // 日历
                /*按天设置*/
                startDate:'',
                endDate:'',
                weeksData: ['日', '一', '二', '三', '四', '五', '六'],
                list:[],
                curDateValue: '',
                month: 0,
                year: 0,
                ourMonth: 0,
                ourYear: 0,
                showCalendarValue: false,
                visible:false,
                entryPersonData:{
                    card_front:'加载中...',
                    card_back:'加载中...',
                    is_health_cert:'加载中...',
                    nick_name:'加载中...',
                    birthday:'加载中...',
                    entryDate:'请选择入职日期'
                },
                department:false,
                departmentList:{},
                departmentText:'请选择门店',
                departmentId:'',
                department1List:[],
                department1Text:'请选择要更换的课',
                department1Id:'',
                departmentListCache:[],
                departmentChildrenListCache:[],


            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        computed: {
            popupTitle (){
                return this.entryPersonData.entryStatus === '已入职' ? this.entryPersonData.entryStatus : '入职确认'
            }
        },
        methods: {
            initCalendar (){
                cache.getMemoryCache('workDate', (data) => {
                    console.log(data)
                    if(data){
                       this.list = data
                    }
                })
                let date = new Date()
                this.startDate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()
                this.endDate = (date.getFullYear()+1)+"-"+(date.getMonth()+1)+"-"+date.getDate()
            }, 
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
              if(util.getQueryString('type')){
                this.teamId = util.getQueryString('tid')
                this.projectId = util.getQueryString('pid')
                this.groupId = util.getQueryString('gid')
                this.userId = util.getQueryString('uid')
                this.type = util.getQueryString('type')
              }else{
                this.teamId = util.getUrddataString('tid')
                this.projectId = util.getUrddataString('pid')
                this.groupId = util.getUrddataString('gid')
                this.userId = util.getUrddataString('uid')
              }
              
              userCenterApi.getUserInfo((data) => {
                  this.isOur = data.userId == this.userId
              })
              //获取成员信息
              this.getUserInfo()
              this.getPermission()
              commonPage.getWebViewID((data)=>{
                  cache.setMemoryCache('webViewID',{'webViewID':data})
              })
              //获取评价
              this.receiveEvaluation()
              // 日历
              this.initCalendar()
            },
            showCalendar(){
                this.showCalendarValue = !this.showCalendarValue
            },
            onClose(){
                this.visible = false
            },
            onSubmit(){
                if(this.entryPersonData.entryDate === '请选择入职日期'){
                    widget.toast('请选择入职日期')
                    return
                }
                this.submitEntryDate()
            },
            showEntryDate(){
                this.visible = true
            },
            submit(){
                let date = new Date()
                let y = date.getFullYear()
                let m = date.getMonth() < 9 ? '0' + (date.getMonth()+1) : (date.getMonth()+1)
                let d = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
                let today = y + '-' + m + '-' + d
                if(!this.curDateValue){
                    widget.toast('请选择日期')
                    return
                }
                this.entryPersonData.entryDate = this.curDateValue
                this.showCalendar()
                return
                let arr = []
                this.list.forEach ( (o) => {
                    if(o > today || o == today){
                        arr.push(o)
                    }
                })
                if(this.list.length && this.list.length ==1){
                    // commonPage.goBack(1,{'key':'workDate','value':arr.sort(),'pream':11})
                    // alert(JSON.stringify(arr))
                    this.submitEntryDate(arr[0])
                }else if(this.list.length && this.list.length >1){
                    widget.toast('入职日期只能选择一个')
                }else{
                    widget.toast('请选择日期')
                }
            },
            submitEntryDate (){
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url:'/group/member_edit',
                    type:'POST',
                    data:{
                        team_id: this.teamId,
                        project_id: this.projectId,
                        user_id: this.userId,
                        group_id:this.groupId,
                        identity:999999,
                        entry_date:this.entryPersonData.entryDate
                    },
                    timeout:10000,
                    success:(result) => {
                        if (result.errno == 0){
                            this.visible = false
                            this.entryPersonData.entryDate = '请选择入职日期'
                            this.init()
                            widget.toast('入职成功')
                        }
                    },
                    error: (xhr, status) => {
                        // error
                        commonPage.loadPageStatus('loadSuccess')
                        var toastStr = ''
                        if(status == 'timeout'){
                        toastStr = '网络请求超时'
                        }else{
                        toastStr = '服务器异常'
                        }

                        widget.toast(toastStr)
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    } 
                })
            },
            previewPic(url){
                clientUi.bigPicturePreview('预览', [url], 0)
            },
            // 更换部门
            onCloseDepartment(){
                this.department = false
            },
            onSubmitDepartment(){
                this.department = false
                // {'key':'selectGroup','value':selectGroup}
                // let selectGroup = {'id':group.id,'name':group.name}
                let data
                if(this.department1Id){
                    data = {'key':'selectGroup','value':{ id:this.department1Id, name:this.department1Text}}
                }else{
                    data = {'key':'selectGroup','value': { id:this.departmentId, name:this.departmentText}}
                }
                this.updateData(data)
                // this.init()
            },
            handleDepartmentText(){
                // this.resetData()
                util.ajax({
                    url:'/group/listv2',
                    type:'GET',
                    data:{
                        team_id : this.teamId,
                        project_id : this.projectId,
                    },
                    timeout:10000,
                    beforeSend: () => {

                    },
                    success:(result) => { 
                        if(result.errno == 0){
                            this.departmentListCache = result.data
                            let data1 = []
                            result.data.forEach(v=>{
                                data1.push(v.name)
                            })
                            this.departmentList = {data1}
                            clientUi.showPicker(this.departmentList, [0], '', (data) => {
                                this.department1Text='请选择要更换的课'
                                this.department1Id =''
                                this.departmentChildrenListCache=[]
                                this.departmentText = this.departmentListCache[data.data1].name
                                this.departmentId = this.departmentListCache[data.data1].id
                                if(this.departmentListCache[data.data1].children && this.departmentListCache[data.data1].children.length){
                                    this.departmentChildrenListCache = this.departmentListCache[data.data1].children
                                    let childrenData1 = []
                                    this.departmentChildrenListCache.forEach(v=>{
                                        childrenData1.push(v.name)
                                    })
                                    this.department1List = {data1:childrenData1}
                                }
                            })
                        }
                        
                    },
                    error: (xhr, status) => {
                        var toastStr = ''
                        if(status == 'timeout'){
                            toastStr = '网络请求超时'
                        }else{
                            toastStr = '服务器异常'
                        }

                        widget.toast(toastStr)
                    },
                    complete: () => {

                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            handleDepartment1Text(){
                clientUi.showPicker(this.department1List, [0], '', (data) => {
                    this.department1Text = this.departmentChildrenListCache[data.data1].name
                    this.department1Id = this.departmentChildrenListCache[data.data1].id
                })
            },
            resetData(){
                this.departmentList = {}
                this.departmentText= '请选择门店'
                this.departmentId= ''
                this.department1List=[]
                this.department1Text='请选择要更换的课'
                this.department1Id =''
                this.departmentListCache=[]
                this.departmentChildrenListCache=[]
            },
            // getDepartmentList(){
            //     return new Promise((resolve, reject) => {
                    
            //         util.ajax({
            //             url:'/group/listv2',
            //             type:'GET',
            //             data:{
            //                 team_id : this.teamId,
            //                 project_id : this.projectId,
            //             },
            //             timeout:10000,
            //             beforeSend: () => {

            //             },
            //             success:(result) => { 
            //                 resolve(result);
            //             },
            //             error: (xhr, status) => {
            //                 var toastStr = ''
            //                 if(status == 'timeout'){
            //                     toastStr = '网络请求超时'
            //                 }else{
            //                     toastStr = '服务器异常'
            //                 }

            //                 widget.toast(toastStr)
            //             },
            //             complete: () => {

            //             },
            //             noNetwork: () => {
            //                 // 无网络的回调
            //                 widget.toast('网络连接失败，请检查网络')
            //             }
            //         })
            //     })
            // },
            //拨打电话
            callPhone (mobile){
              let title = '拨打电话';
              let message = mobile;
              let okBtn = '确定';
              let cancelBtn = '取消';
              let imageName = '';
              clientUi.showPhoneDialog(title, message, okBtn, cancelBtn, imageName, () => {})
            },
            //更多 - 人才库
            toMoreInfo (){
              let url = `userId=${this.userId}&doumiUserId=${this.duid}&gid=${this.groupId}&tid=${this.teamId}&pid=${this.projectId}`
              location.href = "dmsaas://TalentDetail?urdData=" + encodeURIComponent(url)
            },
            //选择小组
            selectGroup (){
                if(this.item.action.group && (!this.isXmmerber)){
                    this.department = true
                    return
                    cache.setMemoryCache('KqCacheMessge', {
                    project_id: this.projectId,
                    team_id: this.teamId,
                    
                    })
                    location.href = "dmsaas://GroupSelectSingle?urdData=" + encodeURIComponent(`group_id=${this.item.group_id}`)
                }
            },
            // 更改部门
            selectGroupType(){
                if(this.item.change_list && this.item.change_list.length && (!this.isXmmerber)){
                    cache.setMemoryCache('KqCacheMessge', {
                        changeList: this.item.change_list
                    })
                    location.href = "dmsaas://DepartmentTransferRecords"
                }
            },
            //选择角色
            selectRole(){
              if(this.item.action.identity && (!this.isXmmerber)){
                if(this.identity){
                  cache.setMemoryCache('identityId', {val : this.identity})
                }else{
                   cache.setMemoryCache('identityId', null)
                 }                
                location.href = "dmsaas://ProjectRole?urdData=" + encodeURIComponent(`tId=${this.teamId}&pId=${this.projectId}&uId=${this.userId}`)
              }
            },
            //选择岗位
            selectPost(){
              // if(this.item.action.post && (!this.isXmmerber)){                
                cache.setMemoryCache('postMessage', {
                  station_name: this.memberPost,
                  station_id: this.memberPost_id,
                })   
                location.href = "dmsaas://selectPost?urdData=" + encodeURIComponent(`tId=${this.teamId}&pId=${this.projectId}`)
              // }
            },
            //前往备注页
            selectRemark(){
              location.href = "dmsaas://MemberUpdate?urdData=" + encodeURIComponent(`remark=${this.item.remark}`)
              
            },
            //更新小组&角色
            updateData (data){
              if(!data)return//兼容ios无操作返回时会触发loadData  并返回 0
              let key = data.key
              let value = data.value
              let current_group_id = this.groupId
              let url = '/group/member_edit'
              let myData = {
                    team_id: this.teamId,
                    project_id : this.projectId,
                    group_id: this.groupId,
                    user_id: this.userId,
                    identity: this.identity
                }
                let isload = 0
              switch(key){
                case 'selectGroup':
                    if(this.groupId == value.id)return
                    this.groupId = myData.group_id = value.id
                    this.groupName = value.name

                    isload = 1
                    url = '/group/member_edit'
                    
                    myData = {
                        team_id: this.teamId,
                        project_id : this.projectId,
                        group_id: this.groupId,
                        user_id: this.userId,
                        identity: this.identity,
                        remark: this.item.remark,
                    }
                    
                    break
                case 'selectRole':
                    if(this.identity == value.id)return
                    this.identity = myData.identity = value.id;
                    this.identity_str = value.name;

                    isload = 1
                    url = '/group/member_edit'
                    myData = {
                        team_id: this.teamId,
                        project_id : this.projectId,
                        group_id: this.groupId,
                        user_id: this.userId,
                        identity: this.identity,
                        remark: this.item.remark,
                    }
                    break
                case 'selectPost':
                    if(this.memberPost_id == value.id)return
                    let indexNum = value.name.indexOf('-')
                    let name = value.name.substring(indexNum+1)
                    this.memberPost_id = value.id;
                    this.memberPost = name;

                    isload = 1
                    url = '/group/member_edit'
                    myData = {
                        team_id: this.teamId,
                        project_id : this.projectId,
                        group_id: this.groupId,
                        user_id: this.userId,
                        identity: this.identity,
                        station_name: this.memberPost,
                        station_id: this.memberPost_id,

                    }
                    break
                case 'memberdetails':
                    if(this.item.remark == value)return
                    if(value == '' && this.item.remark == '添加更多备注信息')return
                    this.item.remark = value
                    url = '/group/member_edit_remark'
                    myData = {
                        team_id: this.teamId,
                        project_id : this.projectId,
                        user_id: this.userId,
                        remark: this.item.remark
                    }
                    // alert(JSON.stringify(this.item))
                    break
                default:
                    return
              }
                // alert(JSON.stringify(datas))
            //   changeGroups(datas)
            //   util.ajax({
            //         url:'/changestore/postion_apply',
            //         type:'POST',
            //         data:datas,
            //         timeout:10000,
            //         success:(result) => {
            //         },
            //         error: (xhr, status) => {
            //         },
            //         complete: () => {

            //         },
            //         noNetwork: () => {
            //         }
            //     })
            const datas = {
                team_id: this.teamId,
                project_id : this.projectId,
                current_group_id,
                target_group_id:myData.group_id,
                to_user_id:this.userId
            }
            util.ajax({
                url:'/changestore/postion_apply',
                type:'POST',
                data:datas,
                timeout:10000,
                success:(result) => {
                    util.ajax({
                        url:url,
                        type:'POST',
                        data:myData,
                        timeout:10000,
                        beforeSend: () => {

                        },
                        success:(result) => {
                            if(result.errno == 0){

                            if(isload){//如果角色或小组有更改 调此api  返回上级时 native刷新页面
                                teamApi.setIsLoad(1)
                            }
                            if(this.item.remark.length >29){
                                this.short_remark = this.item.remark.substring(0,29)+'...'
                            }
                            else{
                                this.short_remark = this.item.remark;
                            }
                            this.init()
                                // widget.toast('保存成功!')
                                // commonPage.goBack(1)
                            }else{
                                widget.toast(result.errmsg)
                            }
                        },
                        error: (xhr, status) => {
                            var toastStr = ''
                            if(status == 'timeout'){
                                toastStr = '网络请求超时'
                            }else{
                                toastStr = '服务器异常'
                            }
                            widget.toast(toastStr)
                        },
                        complete: () => {

                        },
                        noNetwork: () => {
                            // 无网络的回调
                            widget.toast('网络连接失败，请检查网络')
                        }
                    })
                    
                },
                error: (xhr, status) => {
                },
                complete: () => {

                },
                noNetwork: () => {
                }
            })
               
            },
            // 更换部门
            changeGroups(data){
                // alert(current_group_id)
                // const data = {
                //     team_id: this.teamId,
                //     project_id : this.projectId,
                //     current_group_id,
                //     target_group_id,
                //     to_user_id:this.userId
                // }
                // alert(JSON.stringify(data))
                // return
                util.ajax({
                    url:'/changestore/postion_apply',
                    type:'POST',
                    data,
                    timeout:10000,
                    success:(result) => {
                    },
                    error: (xhr, status) => {
                    },
                    complete: () => {

                    },
                    noNetwork: () => {
                    }
                })
            },
            // 查看大图
            showBigAvatar (url){
              clientUi.bigPicturePreview('头像', [url], 0)
            },
            //获取成员信息
            getUserInfo(){
                util.ajax({
                      url:'/group/member_info',
                      type:'GET',
                      data:{
                          user_id: this.userId,
                          team_id : this.teamId,
                          project_id : this.projectId,
                          group_id : this.groupId,
                      },
                      timeout:10000,
                      beforeSend: () => {

                      },
                      success:(result) => {                       
                        console.log("获取成员信息"+JSON.stringify(result))
                          if(result.errno == 0){
                            this.item = result.data
                            this.numberHide = this.item.mobile.substr(0, 7) + '****'
                            this.item.remark = this.item.remark == '' ? '添加更多备注信息' : result.data.remark
                            if(this.item.remark.length >29){
                              this.short_remark = this.item.remark.substring(0,29)+'...'
                            }
                            else{
                              this.short_remark = this.item.remark;
                            }
                            this.identity_str = this.item.identity_str;                            
                            this.identity = this.item.identity;
                            this.groupId = this.item.group_id;
                            this.groupName = this.item.group_full_name?this.item.group_full_name:this.item.group_name;
                            this.memberPost = this.item.station_name;
                            this.memberPost_id = this.item.station_id;
                            this.duid = result.data.doumi_user_id //用于人才库更多信息
                            if(result.data.member_status ==-1){
                              this.item.action.delete = false
                            }
                            // 获取待入职人员基本信息
                            this.entryPersonData = {
                                card_front:result.data.card_front,
                                card_back:result.data.card_back,
                                is_health_cert:result.data.is_health_cert,
                                nick_name:result.data.real_name || result.data.name,
                                birthday:result.data.birthday,
                                entryDate: result.data.entry_date || '请选择入职日期',
                                entryStatus: result.data.entry_date ? '已入职' : '待入职',
                            }
                              
                          }
                      },
                      error: (xhr, status) => {
                        var toastStr = ''
                        if(status == 'timeout'){
                            toastStr = '网络请求超时'
                        }else{
                            toastStr = '服务器异常'
                        }

                        widget.toast(toastStr)
                      },
                      complete: () => {

                      },
                      noNetwork: () => {
                          // 无网络的回调
                          widget.toast('网络连接失败，请检查网络')
                      }
                  })
            },
            // 获取权限
            getPermission(){
                let permLabel = 'admin_change_member_role', // '改变团队成员角色'
                    editGroup = 'edit_group', // 修改小组
                    delMember = 'remove_group_member',
                    getEvaluation = 'get_comment',//获取评价
                    submitEvaluation = 'submit_comment'//提交评价
                util.ajax({
                    url: '/permission/application',
                    data: {
                        team_id: this.teamId,
                        project_id: this.projectId,
                        application_id: 0
                    },
                    success: (res) => {
                       console.log("权限"+JSON.stringify(res))
                        if(res.errno == 0){
                            let permissionData = res
                            // // 修改项目角色权限
                            // this.adminChangeMemberRole = permissionData.data.some((o, i, a) => {
                            //     if(o.id_name == permLabel){
                            //         return true
                            //     }
                            // })

                            // // 修改所在小组权限
                            // this.editGroup = permissionData.data.some((o, i, a) => {
                            //     if(o.id_name == editGroup){
                            //         return true
                            //     }
                            // })

                            // // 删除按钮是否显示(目前还未应用)
                            // this.showDelMemberBtn = permissionData.data.some((o, i, a) => {
                            //     if(o.id_name == delMember){
                            //         return true
                            //     }
                            // })
                            // 是否为非项目成员
                            this.isXmmerber = permissionData.data.some((o, i, a) => {
                                if(o.id_name == 'invisible_man'){
                                    return true
                                }
                            })
                            // //查看评价权限
                            // this.showEvaluation = permissionData.data.some((o, i, a) => {
                            //     if(o.id_name == getEvaluation){
                            //         return true
                            //     }
                            // })
                            // if(this.showEvaluation){
                            //   this.receiveEvaluation();
                            // }
                            //提交评价权限
                            // this.showSubmitevaluation = permissionData.data.some((o, i, a) => {
                            //     if(o.id_name == submitEvaluation){
                            //         return true
                            //     }
                            // })
                        }else{
                            widget.toast(res.errmsg)
                        }

                        if(this.isEmploee){
                            // 有权限采取获取 员工统计数据
                            this.getEeData()
                        }
                        commonPage.loadPageStatus('loadSuccess')
                    },
                    error: (xhr, error) => {
                        widget.toast('服务器异常')
                        commonPage.loadPageStatus('loadSuccess')
                    }
                })
            },
            doSubmit (){
              if(!this.groupId){
                widget.toast('请选择小组')
                return
              }else if(!this.identity){
                widget.toast('请选择角色')
                return
              }
              if (this.item.action.group || this.item.action.identity) {
                  util.ajax({
                      url:'/group/member_edit',
                      type:'POST',
                      data:{
                          team_id: this.teamId,
                          project_id : this.projectId,
                          group_id: this.groupId,
                          user_id: this.userId,
                          identity: this.identity,
                          remark: this.item.remark,
                      },
                      timeout:10000,
                      beforeSend: () => {

                      },
                      success:(result) => {
                          if(result.errno == 0){
                              widget.toast('保存成功!')
                              commonPage.goBack(1)
                          }else{
                              widget.toast(result.errmsg)
                          }
                      },
                      error: (xhr, status) => {
                          var toastStr = ''
                          if(status == 'timeout'){
                              toastStr = '网络请求超时'
                          }else{
                              toastStr = '服务器异常'
                          }

                          widget.toast(toastStr)
                      },
                      complete: () => {

                      },
                      noNetwork: () => {
                          // 无网络的回调
                          widget.toast('网络连接失败，请检查网络')
                      }
                  })
              }

                if (this.item.remark) {
                    util.ajax({
                        url: '/group/member_edit_remark',
                        type:'POST',
                        data:{
                            team_id: this.teamId,
                            project_id : this.projectId,
                            user_id: this.userId,
                            remark: this.item.remark
                        },
                        timeout:10000,
                        beforeSend: () => {

                        },
                        success:(result) => {
                            if(!this.item.action.group && !this.item.action.identity && result.errno == 0){
                                widget.toast('保存成功!')
                                commonPage.goBack(1);
                            }
                        },
                        error: (xhr, status) => {
                          var toastStr = ''
                          if(status == 'timeout'){
                              toastStr = '网络请求超时'
                          }else{
                              toastStr = '服务器异常'
                          }

                          widget.toast(toastStr)
                        },
                        complete: () => {

                        },
                        noNetwork: () => {
                            // 无网络的回调
                            widget.toast('网络连接失败，请检查网络')
                        }
                    })
                }
            },
            //删除成员
            delMember (){
              let user_id = this.userId
              let team_id = this.teamId
              let project_id = this.projectId
              let group_id = this.groupId
              clientUi.showDialog('删除成员', '是否确认?', function(data){
                      if(data.status==1){
                        util.ajax({
                            url:'/group/member_remove',
                            type:'POST',
                            data:{
                              user_id: user_id,
                              team_id : team_id,
                              project_id : project_id,
                              group_id : group_id,
                            },
                            timeout:10000,
                            beforeSend: () => {

                            },
                            success:(result) => {
                                if(result.errno == 0){
                                  widget.toast('删除成功')
                                  commonPage.goBack(1)
                                }else if (result.errno == 15011) {
                                    widget.toast('项目已结束不能执行此操作');
                                } else {
                                    widget.toast('服务器异常')
                                }
                            },
                            error: (xhr, status) => {
                              var toastStr = ''
                              if(status == 'timeout'){
                                  toastStr = '网络请求超时'
                              }else{
                                  toastStr = '服务器异常'
                              }

                              widget.toast(toastStr)
                            },
                            complete: () => {

                            },
                            noNetwork: () => {
                                // 无网络的回调
                                widget.toast('网络连接失败，请检查网络')
                            }
                        })
                      }
                  }, '确定', '取消')
            },
            //获取评价
            receiveEvaluation(){
                util.ajax({
                    url:'/comment/get',
                    type:'GET',
                    data:{
                        team_id: this.teamId,
                        project_id: this.projectId,
                        user_id: this.userId
                    },
                    timeout:10000,
                    success:(obj) => {
                        console.log("获取评价信息"+JSON.stringify(obj))
                        if(obj&&obj.errno == 0){
                            this.showEvaluation = true
                            this.evaluation_data = obj.data
                            this.evaluation_data.star_data.forEach( (obj) => {
                              if(obj.star == this.evaluation_data.star_level){
                                this.evaluation_data.prompt = obj.prompt
                              }
                            })

                        }else if(obj.errno == 4){
                            this.showEvaluation = false
                        }else{
                            this.showEvaluation = true
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        widget.toast('网络连接失败，请检查网络')
                    },
                    noNetwork: () => {
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            //提交评价
            submitEvaluation(){
                util.ajax({
                    url:'/comment/submit',
                    type:'POST',
                    data:{
                        team_id: this.teamId,
                        project_id: this.projectId,
                        user_id: this.userId,
                        star: this.evaluation_data.star_level,
                        tag: this.evaluation_tag,
                        evaluate: this.evaluation_data.evaluate,
                        source: 1
                    },
                    timeout:10000,
                    success:(obj) => {
                       if(obj&&obj.errno == 0){
                          this.receiveEvaluation()
                        }else{
                          widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        widget.toast('网络连接失败，请检查网络')
                    },
                    noNetwork: () => {
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            gotoEvaluation(star_level){
              // if(this.showSubmitevaluation){
                this.evaluation_data.star_level = star_level
                
                teamApi.showEvaluation(this.evaluation_data, (data) => {
                  if(data.star_level){               
                                 
                    this.evaluation_data.star_level = data.star_level
                    this.evaluation_tag = data.tag                     
                    this.evaluation_data.evaluate = data.evaluate
                    this.submitEvaluation()
                  }else{
                     
                      // this.evaluation_data.star_level = this.evaluation_data.star_level
                      // this.evaluation_tag = this.evaluation_tag                  
                      // this.evaluation_data.evaluate = this.evaluation_data.evaluate
                      this.receiveEvaluation();                            
                  }
                })
              // }else{
              //   widget.toast('项目已结束不能执行此操作')
              // }
                
                
            }
        },
        created(){
          //控制header
            // commonPage.updateTitleBar({
            //     leftDisplay: false,
            //     rightDisplay: true,
            //     rightText: '保存',
            //     rightAction: 'doSubmit'
            // })
            window.loadData = this.updateData
            // window.doSubmit = this.doSubmit
            this.init();

        }

    }
</script>

<!-- CSS 样式 -->
<!-- <style src="static/css/global.css"></style> -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/user-list.css"></style>
<style src="../../static/css/evaluation.css"></style>
<style src="../../static/css/vue-multiselect.min.css"></style>

<style>
.calendar-pannel{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 90%;
        background: #fff;
        z-index: 999;
        border-radius: 10px 10px 0 0;
    }
    .popup-title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        width: 100%;
        height: 60px;
        box-sizing: border-box;
    }
    .popup-title-text{
        flex: 1;
    }
    .modal{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.6);
        z-index: 10000;
    }
</style>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<!-- <style src="../../static/css/calendar.css"></style> -->
<style>
    /*!
 * Vux v0.1.3 (https://vux.li)
 * Licensed under the MIT license
 */
.vux-next-icon,.vux-prev-icon{position:absolute;left:0;top:15px;display:inline-block;width:12px;height:12px;border:1px solid #04be02;border-radius:0;border-top:none;border-right:none;-webkit-transform:rotate(45deg);transform:rotate(45deg);margin-left:15px;line-height:40px}.vux-next-icon{-webkit-transform:rotate(-135deg);transform:rotate(-135deg);left:auto;top:14px;right:15px}.vux-prev-icon:before{display:block;width:12px;height:12px;border:1px solid #04be02;border-width:1px 0 0 1px;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.is-weekend-highlight td.is-week-0,.is-weekend-highlight td.is-week-6,.is-weekend-highlight td.is-week-list-0,.is-weekend-highlight td.is-week-list-6{color:#e59313}.inline-calendar a{text-decoration:none;tap-highlight-color:transparent}.calendar-month,.calendar-year{position:relative}.calendar-header{line-height:40px;font-size:1.2em;overflow:hidden}.calendar-header>div{float:left;width:50%;text-align:center;overflow:hidden}.calendar-header a:last-of-type{float:right;vertical-align:bottom}.calendar-title,.switch-btn{display:inline-block;border-radius:4px;line-height:30px}.switch-btn{width:30px;margin:5px;color:#39b5b8;font-family:SimSun}.calendar-title{padding:0 6%;color:#333}.calendar-header a.active,.calendar-title:active,.switch-btn:active{background-color:#39b5b8;color:#fff}.calendar-week{overflow:hidden}.calendar-week span{float:left;width:14.28%;font-size:1.6em;line-height:34px;text-align:center}.inline-calendar{width:100%;background:#fff;border-radius:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.inline-calendar td.is-today,.inline-calendar td.is-today.is-disabled{color:#04be02}.calendar-enter,.calendar-leave{opacity:0;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}.calendar:before{top:-10px;border-bottom-color:#dedede}.calendar:after,.calendar:before{position:absolute;left:30px;content:"";border:5px solid transparent}.calendar:after{top:-9px;border-bottom-color:#fff}.calendar-tools{height:32px;font-size:20px;line-height:32px;color:#04be02}.calendar-tools .float.left{float:left}.calendar-tools .float.right{float:right}.calendar-tools input{font-size:20px;line-height:32px;color:#04be02;width:70px;text-align:center;border:none;background-color:transparent}.calendar-tools>i{margin:0 16px;line-height:32px;cursor:pointer;color:#707070}.calendar-tools>i:hover{color:#5e7a88}.inline-calendar table{clear:both;width:100%;border-collapse:collapse;color:#444}.inline-calendar td{padding:5px 0;text-align:center;vertical-align:middle;font-size:16px;position:relative}.inline-calendar td.is-disabled,.inline-calendar td.week{pointer-events:none!important;cursor:default!important}.inline-calendar td.is-disabled{color:silver}.inline-calendar td>span{display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;text-align:center}.vux-calendar-range.inline-calendar td.current{background-color:#04be02}.vux-calendar-range table{margin-bottom:10px}.inline-calendar td.current>span{background-color:#04be02;color:#fff}.inline-calendar .timer{margin:10px 0;text-align:center}.inline-calendar .timer input{border-radius:2px;padding:5px;font-size:14px;line-height:18px;color:#5e7a88;width:50px;text-align:center;border:1px solid #efefef}.inline-calendar .timer input:focus{border:1px solid #5e7a88}.calendar-button{text-align:center}.calendar-button button{border:none;cursor:pointer;display:inline-block;min-height:1em;min-width:8em;vertical-align:baseline;background:#5e7a88;color:#fff;margin:0 .25em 0 0;padding:.8em 2.5em;font-size:1em;line-height:1em;text-align:center;border-radius:.3em}.calendar-button button.cancel{background:#efefef;color:#666}.vux-popup{border-top:2px solid #04be02}.vux-popup-dialog{position:fixed;left:0;bottom:0;width:100%;background:#eee;z-index:101;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.3s;transition-duration:.3s}.vux-popup-mask{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;tap-highlight-color:transparent;z-index:-1}.vux-popup-mask.vux-popup-show{opacity:1;z-index:100;-webkit-transition:opacity .3s;transition:opacity .3s}.vux-popup-enter,.vux-popup-leave{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.vux-tap-active{tap-highlight-color:transparent}.vux-tap-active:active{background-color:#ececec}.weui_cell{position:relative}.weui_cell:before{content:" ";position:absolute;left:0;top:0;width:100%;height:1px;border-top:1px solid #d9d9d9;color:#d9d9d9;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5);left:15px}.weui_cell:first-child:before{display:none}.weui_cells{margin-top:1.17647059em;background-color:#fff;line-height:1.41176471;font-size:17px;overflow:hidden;position:relative}.weui_cells:before{top:0;border-top:1px solid #d9d9d9;-webkit-transform-origin:0 0;transform-origin:0 0}.weui_cells:after,.weui_cells:before{content:" ";position:absolute;left:0;width:100%;height:1px;color:#d9d9d9;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui_cells:after{bottom:0;border-bottom:1px solid #d9d9d9;-webkit-transform-origin:0 100%;transform-origin:0 100%}.weui_cells_title{margin-top:.77em;margin-bottom:.3em;padding-left:15px;padding-right:15px;color:#888;font-size:14px}.weui_cells_title+.weui_cells{margin-top:0}.weui_cells_tips{margin-top:.3em;color:#888;padding-left:15px;padding-right:15px;font-size:14px}.weui_cell{padding:10px 15px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.weui_cell_ft{text-align:right;color:#888}.weui_cell_primary{-webkit-box-flex:1;-ms-flex:1;flex:1}.weui_cell_bd>p{color:#000}.weui_cell_ft.with_arrow:after{content:" ";display:inline-block;-webkit-transform:rotate(45deg);transform:rotate(45deg);height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;position:relative;top:-1px;margin-left:.3em}.vux-label-desc{font-size:14px;color:#666}
</style>
<!-- <style src="../../static/css/common.css"></style> -->
<style>
    html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
    font-family: "Helvetica Neue", "Microsoft Yahei", sans-serif;   
    font-size: 14px;
    background: #f2f2f2;
    color: #333;
}
html, body {
    height: 100%;
}
input, textarea, select, button {
    font-size: 16px;
    font-family: "Helvetica Neue", "Microsoft Yahei", sans-serif;
    color: #333;
}
input:focus, textarea:focus {
    outline: none;
}
textarea {
    resize: none;
}
::-webkit-input-placeholder {
    color: #ccc;
}
ol, ul {
    list-style: none;
}
a {
    color: #333;
}
em {
    font-style: normal;
}
.page {
    overflow: hidden;
    min-height: 100%;
    box-sizing: border-box;
}
.page.show-navbar {
    padding-top: 40px;
}
.page.show-tabbar {
    padding-bottom: 44px;
}
.page.show-footerBtn {
    padding-bottom: 64px;
}
.red-dot {
    display: inline-block;
    min-width: 18px;    
    height: 18px;   
    line-height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    text-align: center;
    background: #f40;
    font-size: 12px;
    color: #fff;
    border-radius: 9px;
}
.touch {
    background: #fff;
}
.touch:active {
    background: #fafafa !important;
}
.mod-btn-box {
    padding: 30px 20px;
}
.link-access {
    position: relative;
}
.link-access::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-width: 2px 2px 0 0;
    border-style: solid;
    border-color: rgb(204, 204, 204);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 12px;
    top: 50%;
    margin: -4px 2px 0 0;
}
.bg_sprite, .hierarchy::before, .btn_add::before {
    display: inline-block;
    background-image: url(../../static/imgs/sprite.png);
    background-repeat: no-repeat;
    -webkit-background-size: 250px auto;
    background-size: 250px auto;
}
.bg-color {
    background: #fff !important;
}
.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
/* clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix {
    zoom: 1;
}

/* reset weui */
.weui-cells__title {
    color: #bbb;
    margin: 0;
    line-height: 20px;
    padding: 14px 12px 6px;
}
.weui-cells__title span {
    margin-right: 14px;
}
.weui-cells {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 12px;   
}
.searchbar + .weui-cells {
    margin-top: -1px;
}
.weui-cells:before, .weui-cells:after, .weui-cell:before, .weui-actionsheet__cell:before {
    border-color: #e5e5e5;
}
.weui-cell {
    padding: 12px;
}
.weui-cell:before {
    left: 12px;
}
.weui-cells_form .weui-cell__ft {
    line-height: 0;
}
.weui-cells_checkbox .weui-cell:before {
    left: 47px;
}
.weui-cell_select {
    padding: 0;
}
.weui-cell_select-after {
    padding-left: 12px;
}
.weui-select {
    height: 48px;
    line-height: 48px;
}
.weui-cell_select .weui-cell__bd:after {
    right: 12px;
}
.weui-cell_access:active, .weui-actionsheet__cell:active, .weui-dialog__btn:active, .weui-cells_checkbox .weui-cell:active {
    background-color: #fafafa;
}
.weui-cell__bd {
    overflow: hidden;
}
.weui-cell__bd p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.weui-cell__bd .title, .weui-label {
    color: #999;
    display: inline-block;
    width: auto;
    min-width: 64px;
    margin-right: 18px;
}
.weui-cell__bd .placeholder {
    color: #ccc;
}
.weui-input {
    height: 1.5em;
    line-height: 1.5;
}
.weui-btn {
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    border-radius: 2px;
}
.weui-btn_primary {
    background-color: #fa0;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
    background-color: #f90;
}
.weui-btn_disabled.weui-btn_primary {
    background-color: rgba(255, 170, 0, 0.4);
}
.weui-btn_disabled.weui-btn_primary.fixed {
    background: #fd9;
}
.weui-btn_primary:after, .weui-btn_warn:after {
    display: none;
}
.weui-btn.fixed {
    position: fixed;
    z-index: 99;
    width: 100%;
    border-radius: 0;
    left: 0;
    bottom: 0;
}
.weui-btn.fixed::after {
    display: none;
}
.weui-cells_radio .weui-check:checked + .weui-icon-checked:before, .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
    color: #fa0;
}
.weui-tabbar {
    position: fixed;
}
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
    color: #fa0;
}
.weui-search-bar__cancel-btn {
    color: #333;
    font-size: 16px;
}
.weui-cell_switch {
    padding: 8px 12px;
}
.weui-switch:checked {
    background-color: #fa0;
    border-color: #fa0;
}
.weui-mask {
    background: rgba(0, 0, 0, 0.5);
}
.weui-dialog__hd {
    font-size: 18px;
    line-height: 24px;
    padding: 25px 18px 10px;
}
.weui-dialog__bd {
    font-size: 16px;
    line-height: 22px;
    min-height: 0;
    padding: 0 18px 15px;
}
.weui-dialog__bd:first-child {
    padding: 25px 18px 15px;
    color: #999;
}
.weui-cell__ft {
    color: #bbb;
    font-size: 14px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
    min-height: 24px;
    box-sizing: border-box; 
}
.weui-cell__ft span {
    margin-right: 10px;
}
.weui-cell__ft span:last-child {
    margin-right: 0;
}
.weui-dialog__ft:after, .weui-dialog__btn:after {
    border-color: #e5e5e5;
}
.weui-dialog__btn_default {
    color: #999;
}
.weui-dialog__btn_primary {
    color: #333;
}
.searchbar {
    position: relative;
}
.weui-search-bar {
    background-color: #f2f2f2;
}
.weui-search-bar::before, .weui-search-bar::after {
    border-color: #e5e5e5;
}
.weui-search-bar__label, .weui-icon-search {
    color: #ccc;
}
.weui-search-bar__label {
    line-height: 26px;
}
.searchbar-result {
    width: 100%;
    font-size: 14px;
    margin-top: 0;
    position: absolute !important;
    left: 0;
    top: 44px;
    z-index: 10;
}
.searchbar-result .keyword {
    color: #fa0;
}
.weui-cells_checkbox .weui-cell__hd {
    padding-right: 0;
}
[class^="weui-icon-"]:before, [class*=" weui-icon-"]:before {
    margin: 0 12px 0 0;
}
.weui-icon-search:before, .weui-icon-clear:before, .weui-cells_radio .weui-icon-checked::before {
    margin: 0;
}
.weui-textarea-counter {
    font-size: 14px;
    color: #999;
}
/* .weui-textarea-counter span {
    color: #535353;
} */

/* mod-tabs */
.mod-tabs {
    display: -webkit-box;
    display: flex;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(234, 233, 233, 0.5);
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99;
}
.mod-tabs li {
    -webkit-box-flex: 1;
    flex: 1;
    text-align: center;
}
.mod-tabs a {
    display: block;
    height: 40px;
    line-height: 40px;
    color: rgba(153, 153, 153, 0.9);
}
.mod-tabs a.current {
    color: rgb(102, 102, 102);
    box-shadow: 0 -2px 0 rgb(255, 187, 0) inset;
    font-weight: bold;
}

/* border */
[class*="com-border-"] {
    position: relative;
    overflow: hidden;
}
.com-border-top::before, .com-border-bottom::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: rgb(229, 229, 229);   
    left: 0;
    -webkit-transform: scale3d(1, 0.5, 1);
    transform: scale3d(1, 0.5, 1);  
    z-index: 9;
}
.com-border-top::before {
    top: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.com-border-bottom::after {
    bottom: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.com-border-outside::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid rgb(229, 229, 229);
    box-sizing: border-box;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    left: 0;
    top: 0;
}
[class*="com-border-"].ml::before, [class*="com-border-"].ml::after {
    left: 12px;
}

/* upload pic */
.upload-pic {
    background: #fff;
    padding: 15px 0 8px 12px;
    overflow: hidden;
    position: relative;
}
.upload-pic h2 {    
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    color: #999;
    margin-bottom: 20px;
}
.upload-pic .pic-list {
    overflow: visible;
}
.upload-pic .pic-list li {
    float: left;
    margin: 0 12px 12px 0;
    position: relative;
}
.upload-pic .pic-list img {
    display: block;
    width: 60px;
    height: 60px;
}
.upload-pic .btn-delete {
    width: 18px;
    height: 18px;
    background: #ccc;
    border-radius: 50%;
    position: absolute;
    right: -8px;
    top: -10px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.upload-pic .btn-delete::before, .upload-pic .btn-delete::after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 1px;
    left: 50%;
    top: 50%;
}
.upload-pic .btn-delete::before {
    width: 10px;
    height: 2px;
    margin: -1px 0 0 -5px;
}
.upload-pic .btn-delete::after {
    width: 2px;
    height: 10px;
    margin: -5px 0 0 -1px;
}
.uploader {
    width: 60px;
    height: 60px;
    float: left;
    margin: 0 12px 12px 0;
    position: relative;
    background: #fff;
}
.uploader.disabled {
    opacity: 0.4;
}
.uploader input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    outline: none;
    opacity: 0;
}
.uploader div::before, .uploader div::after {
    content: "";
    position: absolute;
    background: rgb(204, 204, 204);
    left: 50%;
    top: 50%;
    border-radius: 2px;
}
.uploader div::before {
    width: 28px;
    height: 2px;
    margin: -1px 0 0 -14px;
}
.uploader div::after {
    width: 2px;
    height: 28px;
    margin: -14px 0 0 -1px;
}
.uploader::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid rgb(204, 204, 204);
    box-sizing: border-box;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

/* calendar */
.inline-calendar {
    overflow: hidden;
}
.inline-calendar table {
    color: #333;
    margin-bottom: 5px;
}
.calendar-header {
    font-size: 16px;
    line-height: normal;
    text-align: center;
}
.calendar-header > div {
    line-height: 22px;
    padding: 16px 22px 6px;
    float: none;
    width: auto;
    display: inline-block;
    position: relative;
    margin: 0 10px;
}
.calendar-title {
    line-height: inherit;
    padding: 0 20px;    
}
.calendar-title:active {
    background: transparent;
    color: #333;
}
.vux-prev-icon, .vux-next-icon {
    width: 22px;
    height: 22px;
    border: none;   
    margin: 0;
    -webkit-transform: none;
    transform: none;
    top: 16px;  
}
.vux-next-icon {
    right: 0;
}
.vux-prev-icon::after, .vux-next-icon::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-width: 0 0 2px 2px;
    border-style: solid;
    border-color: #fa0;
    left: 50%;
    top: 50%;
    margin-top: -4px;
}
.vux-prev-icon::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: -3px;
}
.vux-next-icon::after {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    margin-left: -6px;
}
.inline-calendar th {
    font-size: 12px;
    color: #ccc;
    padding: 5px 0;
}
.inline-calendar td {
    font-size: 14px;
}
.inline-calendar td > span {
    width: 27px;
    height: 27px;
    line-height: 27px;  
}
.inline-calendar td.is-today, .inline-calendar td.is-today.is-disabled {
    color: #fa0;
}
.inline-calendar td.current > span, .inline-calendar td.selected > span {   
    background-color: rgba(255, 170, 0, 0.1);
    color: #333;
    position: relative;
}
.inline-calendar td.current > span::after, .inline-calendar td.selected > span::after, .inline-calendar td::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.inline-calendar td.green::after, .inline-calendar td::after {
    width: 5px;
    height: 5px;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
}
.inline-calendar td.green::after {
    background: #89c16c;
}
.inline-calendar td.red::after {
    background: #f38355;
}
.inline-calendar td.current > span::after, .inline-calendar td.selected > span::after { 
    width: 200%;
    height: 200%;
    border: 1px solid #fa0;
    box-sizing: border-box; 
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.inline-calendar td.current::after {
    display: none;
}

/* tabbar */
.tabbar {
    width: 100%;    
    background: rgba(255, 255, 255, 0.95);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9;
}
.tabbar ul {
    display: -webkit-box;
    display: flex;
}
.tabbar li {
    -webkit-box-flex: 1;
    flex: 1;
    position: relative;
}
.tabbar a {
    display: block;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #aaa;
}
.tabbar li::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 22px;
    background: #e5e5e5;
    -webkit-transform: scale3d(0.5, 1, 1);
    transform: scale3d(0.5, 1, 1);
    right: 0;
    top: 11px;
}
.tabbar li:last-child::after {
    display: none;
}
.tabbar .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: rgb(221, 222, 226);
    margin-right: 8px;
}
.tabbar a span {
    vertical-align: middle;
}
.tabbar .current .icon {
    background-color: rgb(255, 170, 0);
}
.tabbar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    left: 0;
    top: 0;
    -webkit-transform: scale3d(1, 0.5, 1);
    transform: scale3d(1, 0.5, 1);
}

/* toast */
.mod-toast {
    width: 100%;
    padding: 0 75px;
    box-sizing: border-box;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 9999;
}
.mod-toast p {
    display: inline-block;
    background: rgba(17, 17, 17, 0.7);
    padding: 32px 24px; 
    font-size: 16px;
    line-height: 22px;  
    color: #fff;
    border-radius: 5px;
}

/* button */
[class*="mod-btn-s-"] {
    display: inline-block;
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border-radius: 2px;
    position: relative;
}
[class*="mod-btn-s-"]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 4px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.mod-btn-s-1 {
    background: rgb(255, 170, 0);
    color: rgb(255, 255, 255);
}
.mod-btn-s-1::after, .mod-btn-s-3.selected::after {
    display: none;
}
.mod-btn-s-1:active {
    background: rgb(255, 153, 0);
    color: rgba(255, 255, 255, 0.6);
}
.mod-btn-s-1.disabled {
    background: rgba(255, 170, 0, 0.4);
    color: rgba(255, 255, 255, 0.6);
}
.mod-btn-s-2 {
    background: rgb(248, 248, 248);
    color: rgb(53, 53, 53);
}
.mod-btn-s-2::after {
    border-color: rgba(5, 5, 5, 0.1);
}
.mod-btn-s-2:active {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(53, 53, 53, 0.6);
}
.mod-btn-s-3 {  
    color: rgb(255, 170, 0);
}
.mod-btn-s-3::after {
    border-color: rgb(255, 170, 0);
}
.mod-btn-s-3:active {   
    color: #fc6;
}
.mod-btn-s-3:active::after {
    color: #fc6;
}
.mod-btn-s-3.disabled {
    color: rgb(204, 204, 204);
}
.mod-btn-s-3.disabled::after {
    border-color: rgb(204, 204, 204);
}
.mod-btn-s-3.selected {
    background: rgb(255, 170, 0);
    color: rgb(255, 255, 255);
}
.btn-box.fixed {
    padding: 9px 10px 10px;
    border-top: 1px solid #e6e6e6;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    bottom: 0;
    z-index: 99;
}

/* empty */
.mod-empty {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    margin-top: -30px;
}
.mod-empty .icon {
    display: block;
    width: 115px;
    height: 115px;
    margin: 0 auto 10px;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}
.mod-empty .icon_1 {    
    background-image: url(../../static/imgs/icons/icon_1.png);
}
.mod-empty .icon_2 {    
    background-image: url(../../static/imgs/icons/icon_2.png);
}
.mod-empty .icon_3 {    
    background-image: url(../../static/imgs/icons/icon_3.png);
}
.mod-empty .icon_4 {    
    background-image: url(../../static/imgs/icons/icon_4.png);
}
.mod-empty .tip {   
    color: #999;
    font-size: 16px;
    line-height: 22px;
}
.mod-empty .tip_2 {
    font-size: 12px;
    line-height: 16px;
    color: #ccc;
    margin-top: 10px;
}
.mod-empty .weui-btn {
    width: 150px;
    margin-top: 35px;
}

/* crumbs nav */
.mod-crumbs {
    height: 44px;
    line-height: 44px;
    padding-left: 16px;
    background: #fafafa;
    color: #bbb;
}
.mod-crumbs .arrow {
    margin: 0 8px;
    font-family: "Simsun";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #bbb;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    overflow: hidden;
    text-indent: -9999px;
}
.mod-crumbs a {
    color: #f09835;
}
.mod-crumbs a, .mod-crumbs span {
    vertical-align: middle;
}

/* avatar box */
.avatar-box {
    float: left;    
    position: relative;
}
.avatar-box .cover {    
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    left: 0;
    top: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

</style>
<!-- <style src="../../static/css/attendance-set.css"></style> -->
<style>
    .weui-label {
    color: #333;
}
.weui-cell__bd .tip {
    color: #aaa;
    font-size: 13px;
    margin-left: 4px;
}
.block {
    display: block;
}
.add-team {
    overflow: hidden;
    padding: 0 0 6px 12px;
}
.add-team .team {
    float: left;
    height: 36px;
    line-height: 36px;
    padding: 0 6px;
    background: rgba(255, 190, 106, 0.1);
    border-radius: 2px;
    font-size: 14px;
    color: #fa0;    
    margin: 0 10px 12px 0;
}
.add-team .button {
    float: left;
    width: 36px;
    height: 36px;
    /* border: 1px solid rgba(255, 170, 0, 0.7); */
    border: 1px solid #bbb;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 12px;
}
.add-team .button::before, .add-team .button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    /* background: #fa0; */
    background: #bbb;
}
.add-team .button::before {
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
}
.add-team .button::after {
    width: 2px;
    height: 16px;
    margin: -8px 0 0 -1px;
}
.attendance-set .btn_add {
    display: block;
    height: 48px;
    line-height: 48px;
    color: #fa0;
    text-align: center;
}
.attendance-set .btn_add::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-position: -63px -23px;
    margin-right: 6px;
    vertical-align: middle;
}
.attendance-set .btn_add span {
    vertical-align: middle;
}
.weui-cell_access .weui-cell__ft.down:after {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.weui-cell_access .weui-cell__ft.up:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.page.show-footerBtn {
    padding-bottom: 76px;
}
.item-content { 
    margin-top: -1px;   
}
.item-content li {
    padding: 12px 40px 12px 30px;
    background: #fff;
}
.item-content h3 {
    color: #888;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 4px;
}
.item-content p {
    color: #bbb;
    line-height: 22px;  
}
.item-content h3, .item-content p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-content li:not(:last-child)::after {
    left: 30px;
}
.item-content .icon_location {
    position: absolute;
    width: 11px;
    height: 14px;
    background-position: -17px -513px;
    left: 12px;
    top: 16px;
}
.item-content .btn_delete {
    position: absolute;
    width: 18px;
    height: 18px;
    background-position: -46px 0;
    right: 12px;
    top: 50%;
    margin-top: -9px;
}
.weui-cells.sub-option {
    margin-top: 0;  
}
.weui-cells.sub-option .weui-cell {
    padding-left: 30px;
}
.weui-cells.sub-option .weui-cell::before {
    left: 30px;
}
.weui-cells.sub-option::before {
    display: none;
}
.weui-cells.option-set::after {
    left: 12px;
}
.attendance-set .section {
    margin-top: 12px;
}
.mod-set {
    padding: 16px 12px;
}
.mod-set .top {
    overflow: hidden;
    margin-bottom: 20px;
}
.mod-set h2 {
    float: left;
    font-size: 16px;
    font-weight: normal;
    line-height: 30px;
}
.mod-set .tabs {
    float: right;
}
.mod-set .tabs li {
    float: left;
}
.mod-set .tabs a {
    float: left;
    width: 66px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #fa0;
    color: #fa0;
}
.mod-set .tabs .current {
    background: #fa0;
    color: #fff;
}
.mod-set .tip {
    font-size: 13px;
    line-height: 18px;
    text-align: right;
    color: #aaa;
}
.mod-set + .weui-cells, .title-bar + .weui-cells {
    margin-top: 0;
}
.week-list {
    padding: 18px 6px 3px;
    overflow: hidden;
}
.week-list li {
    float: left;
    width: 20%;
    padding: 0 6px;
    box-sizing: border-box;
    margin-bottom: 15px;
}
.week-list span {
    display: block;
    height: 35px;
    line-height: 35px;
    background: #f6f6f6;
    border-radius: 1px;
    text-align: center;
    font-size: 14px;
    color: #888;
    position: relative;
}
.week-list::before {
    left: 12px;
}
.week-list .selected::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: url(../../static/imgs/icon_selected.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    right: 0;
    top: 0;
}
.title-bar {
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
}
.title-bar h2 {
    float: left;
    font-size: 16px;
    font-weight: normal;
    color: rgb(189, 192, 199);
}
.title-bar .btn_delete {
    position: absolute;
    width: 22px;
    height: 22px;
    background-position: 5px -627px;
    right: 10px;
    top: 13px;
}
.section + .btn_add {
    margin-top: 12px;
}
.weui-check__label + .upload-pic {
    padding: 8px 0 6px 47px;
    overflow: visible;
}
.card{
    margin-bottom: 20px;
    color: #999;
}
.card-item{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
    border-bottom: 1px solid #bbb;
    box-sizing: border-box;
    padding: 0 15px;
}
.label{
    width: 120px;
}
.card-text{
    flex: 1;
    text-align: right;
}
.three-column-table {  
    width: 100%;  
    border-collapse: collapse;  
    margin: 0px 0 20px;  
    table-layout: fixed; /* 确保表格布局是固定的，这样我们可以为列设置固定宽度 */  
}  
  
.three-column-table th, .three-column-table td {  
    border: 1px solid #ddd;  
    padding: 8px;  
    text-align: left;  
    word-wrap: break-word; /* 确保长单词或URL可以自动换行 */  
}  
  
.three-column-table th {  
    background-color: #f2f2f2;  
}  
  
.three-column-table td:first-child {  
    /* 第一列（左侧），可以根据需要调整宽度或保持自动 */  
    
}  
  
.three-column-table td:nth-child(2) {  
    width: 200px; /* 中间一列固定宽度 */  
    white-space: normal; /* 允许内容自动换行 */  
    word-break: break-all; /* 确保长单词或无空格文本也能换行 */  
}  
  
.three-column-table td:last-child {  
    /* 第三列（右侧），可以根据需要调整宽度或保持自动 */  
    width: 200px; /* 中间一列固定宽度 */  
    white-space: normal; /* 允许内容自动换行 */  
    word-break: break-all; /* 确保长单词或无空格文本也能换行 */
}  
  
.three-column-table tr:nth-child(even) {  
    background-color: #f9f9f9;  
}  
  
.three-column-table tr:hover {  
    background-color: #f1f1f1;  
}
.graid-item{
    /* width: 100%; */
    display: flex;
    /* justify-content: space-between; */
    /* margin-top: 8px; */
    padding: 8px;
    margin: 8px 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(242, 242, 242);
    position: relative;
}
.graid-item:first-child{
    margin-top: 0;
}
.graid-item-label{
    width: 120px;
    color: rgb(122, 133, 147);

}
.graid-item-text{
    display: auto;
    word-break: break-all;
    color: rgb(122, 133, 147);
    /* text-align: left; */
}
.img{
    display: block;
	width: 60px;
	height: 60px;
}
.graid-item-arrow-right{
    position: absolute;
	width: 6px;
	height: 6px;
	border-width: 0 2px 2px 0;
	border-style: solid;
	border-color: #ccc;
	right: 12px;
	top: 50%;
	margin: -4px 2px 0 0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
</style>